<template>
	<view class="">
		<u-navbar :autoBack="true" title="设置"  :placeholder="true" ></u-navbar>
		<view class="app-set">
			
		<view class="mode flex-box" >
      <text class="box-1">头像</text>
      <button open-type="chooseAvatar" style="background: transparent"  @chooseavatar="uploadImg">

        <img :src="userInfo.headimg || '../../../static/head.png'" mode="heightFix" class="head" />
      </button>

		</view>
		<view class="mode flex-box" @tap="toChangName('/pages/sub/Setting/chang_name')" >
			<text class="box-1">昵称</text>
			<text>{{userInfo.nickname}} ></text>
		</view>
<!--		<view class="mode flex-box">
			<text class="box-1">电话号码</text>
			<text>{{userInfo.tel}} </text>
		</view>-->
		<!-- <view class="mode flex-box" @tap="jump('change_pwd',1)">
			<text class="box-1">登录密码</text>
			<text>></text>
		</view> -->
		<view class="mode flex-box" @tap="jump('change_pwd_pay',1)">
			<text class="box-1">支付密码</text>
			<text>></text>
		</view>
		<view hover-class="none" class="btn" @tap="outLogin">退出登录</view>
		
		</view>
	</view>
</template>
<script>
	import { mapState,mapMutations } from 'vuex'
	import oss from '@/common/js/ossutil.js'
	export default {
		data() {
			return {};
		},
		computed: {
			...mapState(['userInfo','hasLogin'])
		},
		methods: {
			...mapMutations(['logout','update_userinfo']),
			toChangName(item){
				console.log(item,'item')
				uni.navigateTo({
					url:item
				})
			},
			uploadImg:async function(e){


          // let res = await oss.getImage();
				// console.log(res,'8888888')
        // console.log(res)
				// let tempPath =  plus.io.convertLocalFileSystemURL(res.tempFilePaths[0]);
				// let tempPath =  res.tempFilePaths[0];
				oss.upload(e.detail.avatarUrl).then(ret=>{
					this.userInfo.headimg = ret;
					// jpushIM.updateMyAvatar({imgPath:tempPath},res=>{
					// 	console.log(res);
					// });
				this.$u.api.changeHead({headimg:ret})
					.then(res=>{
						if(res.status){this.update_userinfo(this.userInfo)};
						uni.showToast({
							icon:'none',
							title:res.msg
						})
					})
					.catch(err=>{
						console.log(err);
						uni.showToast({
							icon:'none',
							title:err.msg
						});
					})
				}).catch(err=>{
					console.log(err);
					uni.showToast({
						icon:'none',
						title:err.msg
					});
				});
			},
			outLogin(){
				uni.showModal({
					title:"退出提醒",
					content:'确定是否退出当前登录？',
					success:res=> {
						if(res.confirm){
							uni.removeStorageSync('code');
							uni.clearStorageSync();
							this.logout()
							return
						}
					}
				})
			},
			jump(para,index){
				if(index==1 && !this.hasLogin){
					uni.navigateTo({
						url:'/pages/login/login'
					})
				}else{
					uni.navigateTo({
						url:para
					})
				}
			}
		}
	}
	
</script>
<style lang="scss">
	// @import url('@/common/css/comm.less');
	page{
		background:#fff;
	}
	.app-set{
		padding:0 30rpx;
		display: block;
		width: 100%;
	}
	.mode{
		padding:30rpx 0;
		border-bottom:1px solid #EEEEEE;
		font-size:30rpx;
		color:#999;
		.box-1{
			color:#333;
		}
		.head{
			width:88rpx;
			height:88rpx ;
			display: block;
			margin:0;
			box-shadow: 0 1px 3px #999;
			border-radius: 50%;
		}
	}
	.btn{
		display: flex;
		align-items: center;
		justify-content: center;
		display: block;
		width: 90%;
		height: 70rpx;
		background: $base;
		border-radius: 70rpx;
		box-shadow: 0 10rpx 10rpx rgba(208,34,39,0.3);
		margin:20% auto 0;
		color:#fff;
		text-align: center;
		line-height:70rpx;
	}
</style>
